.todo-types {
  display: flex;
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
  .type-item{
    flex: 1;
    position: relative;
    cursor: pointer;
    &.active{
      color: var(--primary-color);
      .todo-title{
        color: inherit;
      }
    }
    &::after{
      content: "";
      position: absolute;
      top: 10px;
      bottom: 10px;
      right: 0;
      width: 2px;
      background-color: #dbdbdb;
    }
    &:last-child::after{
      display: none;
    }
    .todo-title{
      color: #b8b8b8;
    }
    .todo-number{
      font-size: 24px;
    }
  }
}